<template>
	<view class="container">
		<view class="bg-color5 padding-sm text-sm text-white text-center">
			提示：根据国家政策要求，发布信息前需要实名认证
		</view>
		<view class="bg-white padding">
			<view class="bg-white text-13 flex justify-between align-center">
				<view class="text-333 flex-sub text-bold">
					店铺名称
				</view>
				<input type="text" v-model="shopName" value="" class="text-13 flex-treble" placeholder="请输入店铺名称" />
			</view>
			<view class="bg-white text-13 flex justify-between align-center margin-top-sm" @click="changeAddress">
				<view class="text-333 flex-sub text-bold">
					地址
				</view>
				<view class="text-767696 margin-right-xs">
					{{address || '请选择'}}
				</view>
				<!-- <input type="text" v-model="address" value="" class="text-13 flex-treble" placeholder="请输入店铺地址" /> -->
			</view>
			<view class="bg-white text-13 flex justify-between align-center margin-top-sm">
				<view class="text-333 flex-sub text-bold">
					联系电话
				</view>
				<input type="number" v-model="mobile" value="" class="text-13 flex-treble" placeholder="请输入店铺联系电话" />
			</view>
			<view class="text-13 text-333 text-bold margin-top-sm">
				上传营业执照及店铺LOGO
			</view>
			<view class="text-767696 bg-white margin-top text-sm">
				请上传清晰身份证件，避免信息模糊审核不通过
			</view>
			<view class="flex justify-between align-center m-card margin-top">
				<view class="flex justify-center align-center flex-direction">

					<view v-if='credentialsPic' style="position: relative;"
						class="flex justify-center align-center i-left">
						<image style="width: 100%;height: 100%;" :src="credentialsPic" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DelCredent" style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>

					<view v-else class="flex justify-center align-center i-left" @click="uploadCredentialsPic">
						<image :src="baseUrl +'/static/add.png'" mode=""></image>
					</view>

					<view class="text-sm text-999 margin-top-sm">
						营业执照
					</view>
				</view>
				<view class="flex justify-center align-center flex-direction">
					<view v-if='logo' style="position: relative;" class="flex justify-center align-center i-left">
						<image style="width: 100%;height: 100%;" :src="logo" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DelLogo" style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>


					<view v-else class="flex justify-center align-center i-right" @click="uploadLogo">
						<image :src="baseUrl +'/static/add.png'" mode=""></image>
					</view>
					<view class="text-sm text-999 margin-top-sm">
						LOGO
					</view>
				</view>
			</view>

		</view>
		<view class="margin-top-sm padding bg-white">
			<view class="bg-white text-13 flex justify-between align-center">
				<view class="text-333 flex-sub text-bold">
					法人姓名
				</view>
				<input type="text" v-model="leaderName" value="" class="text-13 flex-treble" placeholder="请输入法人姓名" />
			</view>
			<view class="bg-white text-13 flex justify-between align-center margin-top-sm">
				<view class="text-333 flex-sub text-bold">
					法人证件号
				</view>
				<input type="idcard" v-model="leaderId" value="" class="text-13 flex-treble" placeholder="请输入法人身份证号" />
			</view>
			<view class="text-13 text-333 text-bold margin-top-sm">
				上传法人身份证
			</view>
			<view class="text-767696 bg-white margin-top-sm text-sm">
				请上传清晰身份证件，避免信息模糊审核不通过
			</view>
			<view class="flex justify-between align-center IDcard margin-top-sm">
				<view class="flex justify-center align-center flex-direction">
					<view v-if='leaderIdPicBack' style="position: relative;"
						class="flex justify-center align-center i-left">
						<image style="width: 100%;height: 100%;" :src="leaderIdPicBack" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DelBack" style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>
					<view v-else class="flex justify-center align-center i-left" @click="uploadBack">
						<image :src="baseUrl +'/static/positive.png'" mode=""></image>
					</view>
					<view class="text-sm text-999 margin-top-sm">
						身份证人像面
					</view>
				</view>
				<view class="flex justify-center align-center flex-direction">
					<view v-if='leaderIdPicFront' style="position: relative;"
						class="flex justify-center align-center i-left">
						<image style="width: 100%;height: 100%;" :src="leaderIdPicFront" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DelFont" style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>
					<view v-else class="flex justify-center align-center i-right" @click="uploadFont">
						<image :src="baseUrl +'/static/negative.png'" mode=""></image>
					</view>
					<view class="text-sm text-999 margin-top-sm">
						身份证国徽面
					</view>
				</view>
			</view>
		</view>
		<view class="margin-top-sm padding bg-white">
			<view class="text-13 text-333 text-bold" style="margin-bottom: 30rpx;">公司简介</view>
			<view>
				<textarea v-model="description"></textarea>
			</view>
		</view>

		<view class="margin-top-sm padding bg-white">
			<view class="flex justify-between align-center">
				<view class="text-13 text-333 text-bold">
					选择技工服务类型（多选）
				</view>
				<view class="flex justify-start align-center" @click="checkType">
					<view class="">
						请选择
					</view>
					<view class="cuIcon-right lg margin-left-xs">

					</view>
				</view>
			</view>
			<view class="flex flex-wrap margin-top-xs">
				<view class="bg-F4F4F4 round margin-left-xs text-df margin-top-sm color t-btn" v-for="item in checkeds">
					{{item.name}}
				</view>
			</view>
		</view>

		<view class="margin-top-sm padding bg-white">
			<view class="text-13 text-333 text-bold">
				上传门头照片和店内照片
			</view>
			<view style="flex-wrap: wrap;" class="margin-top flex justify-start align-center other-img">
				<view v-if='imgList.length!=0' style="display: flex;">
					<view v-for="item in imgList" style="position: relative;">
						<image style="margin-bottom: 20rpx;" :src="item" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DelotherShopPic(index)"
							style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>

				</view>



				<view class="solids flex justify-center align-center" @tap="ChooseOtherShopPic">
					<text class='cuIcon-cameraadd text-30'></text>
				</view>
			</view>



		</view>
		<view class="margin-top-sm padding bg-white">
			<view class="text-13 text-333 text-bold">
				工程案例
			</view>
			<view style="flex-wrap: wrap;" class="margin-top flex justify-start align-center other-img">
				<view v-if='imgList3.length!=0' style="display: flex;">
					<view v-for="item in imgList3" style="position: relative;">
						<image style="margin-bottom: 20rpx;" :src="item" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="projectShopPic(index)"
							style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>

				</view>



				<view class="solids flex justify-center align-center" @tap="ChooseProjectShopPic">
					<text class='cuIcon-cameraadd text-30'></text>
				</view>
			</view>



		</view>
		<view class="margin-top-sm padding bg-white">
			<view class="text-13 text-333 text-bold">
				其他资质证明
			</view>
			<view style="flex-wrap: wrap;" class="margin-top flex justify-start align-center other-img">

				<view v-if='imgList2.length!=0' style="display: flex;">
					<view v-for="item in imgList2" style="position: relative;">
						<image style="margin-bottom: 20rpx;" :src="item" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DelotherCredent(index)"
							style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>

				</view>

				<view class="solids flex justify-center align-center" @tap="ChooseImage">
					<text class='cuIcon-cameraadd text-30'></text>
				</view>
			</view>
		</view>
		<block v-if='!disabled'>
			<button class="text-15 text-white bg-color padding text-center btn round" @click="submit">确定</button>
			<view class="text-sm text-333 margin-bottom text-center">
				上传身份信息后，平台将24小时内审核
			</view>
		</block>
		<block v-else>
			<button class="text-15 text-white bg-color padding text-center btn round" @click="edit">编辑</button>

		</block>

		<tki-tree @confirm='handChecked' ref="tkitree" :multiple='true' idKey='id' :range="options" rangeKey="name"
			confirmColor="#4e8af7" />
	</view>
</template>

<script>
	import tkiTree from "@/components/tki-tree/tki-tree.vue"
	import {
		appConfig
	} from '@/common/js/config.js'
	import {
		checkIDCard
	} from '@/common/js/idCard.js'
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				shopName: '', //店铺名称
				address: '', //地址
				mobile: '', //联系电话
				logo: '', //店铺Logo
				leaderName: '', //法人姓名
				leaderId: '', //法人证件号
				leaderIdPicBack: '', //反面
				leaderIdPicFront: '', //正面,
				mobile: '', //联系人
				credentialsPic: '', //营业执照，
				shopType: 1,
				shopServiceCategorys: '', //服务类型
				otherCredentialsPic: '', //其他资质
				otherShopPic: '', //店内照片
				imgList: [],
				imgList2: [],
				imgList3: [],
				options: [],
				checkeds: [],
				longitude: '',
				latitude: '',
				detailedAddress: '',
				disabled: false,
				userInfo: {},
				userInfoMsg: {},
				shopServiceSupportList: [],
				description: '',
				id:''

			};
		},

		components: {
			tkiTree
		},
		onLoad(options) {
			this.getTreeList()
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo.shopIdApply) {
				this.userInfo = userInfo
				if (options.id) {
					uni.setNavigationBarTitle({
						title: '服务商详情'
					})
					this.userInfo.shopIdApply = options.id
				}
				this.disabled = true
				this.getDetail()
			}
		},
		// onShow() {


		// },
		methods: {
			checkType() {
				this.$refs.tkitree._show()
			},
			//上传营业执照
			uploadCredentialsPic() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.credentialsPic = req.data
							console.log(this.credentialsPic)
						})
					}
				});
			},
			//删除营业执照
			DelCredent() {
				this.credentialsPic = ''
			},
			//上传店铺logo  
			uploadLogo() {
				console.log(1111)
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.logo = req.data

						})
					}
				});
			},
			//删除店铺logo
			DelLogo() {
				this.logo = ''
			},
			//上传身份证反面
			uploadBack() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.leaderIdPicBack = req.data

						})
					}
				});
			},
			//删除身份证反面
			DelBack() {
				this.leaderIdPicBack = ''
			},
			//上传身份证正面
			uploadFont() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.leaderIdPicFront = req.data

						})
					}
				});
			},
			//删除身份证正面
			DelFont() {
				this.leaderIdPicFront = ''
			},



			//其他资质图片
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.imgList2.push(req.data)
							console.log(this.imgList2)

						})
					}
				});
			},
			//删除其他资质图片
			DelotherCredent(index) {
				this.imgList2.splice(index, 1)
			},
			//删除店内图片	
			DelotherShopPic(index) {
				this.imgList.splice(index, 1)
			},
			projectShopPic(index) {
				this.imgList3.splice(index, 1)
			},


			ChooseOtherShopPic() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.imgList.push(req.data)

						})
					}
				});
			},
			//工程案例
			ChooseProjectShopPic() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.imgList3.push(req.data)
							console.log(this.imgList3)

						})
					}
				});
			},







			//获取服务分类
			async getTreeList() {
				const [err, res] = await this.$get(this.$api.home_categoryTreeList, {
					type: 2,
				});
				if (res) {
					this.options = res.data;
					console.log(res);
				}
			},
			handChecked(data) {
				console.log(data)
				const array = []
				if (data.length != 0) {
					for (let i in data) {
						array.push(data[i].id)
					}
					this.shopServiceCategorys = array.toString()
					this.checkeds = data

				}
			},
			changeAddress() {
				let that = this;
				// #ifdef  APP-PLUS
				uni.navigateTo({
					url: "/pagesA/pages/chooseLocation/chooseLocation?serviceCenter=1",
					animationType: "slide-in-bottom",
				})
				// #endif
					// #ifdef  MP-WEIXIN
				uni.chooseLocation({
					success: function(res) {
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						that.address = res.address;
						that.longitude = res.longitude;
						that.latitude = res.latitude;

						that.detailedAddress = res.name;
					},
				});
				// #endif
			},
			edit(){
				uni.showModal({
					title: '提示',
					content: '你确定要更新服务商信息吗',
					success: res => {
						console.log(res)
						const {
							shopName,
							address,
							logo,
							leaderName,
							leaderId,
							leaderIdPicBack,
							leaderIdPicFront,
							mobile,
							credentialsPic,
							shopType,
							shopServiceCategorys,
							otherCredentialsPic,
							otherShopPic,
							imgList,
							imgList2,
							longitude,
							latitude,
							description
						} = this
						if (!this.shopName) {
							return this.$util.msg('请输入店铺名字')
						}
						if (!this.address) {
							return this.$util.msg('请输入店铺地址')
						}
						if (!this.mobile) {
							return this.$util.msg('请输入联系方式')
						}
						if (!this.credentialsPic) {
							return this.$util.msg('请上传营业执照')
						}
						if (!this.logo) {
							return this.$util.msg('请上传店铺logo')
						}
						if (!this.leaderName) {
							return this.$util.msg('请输入法人姓名')
						}
						
						if (!checkIDCard(this.leaderId)) {
							return this.$util.msg('法人身份证格式有误')
						}
				
				        if (!this.leaderIdPicBack) {
							return this.$util.msg('请上传身份证反面')
						}
						if (!this.leaderIdPicFront) {
							return this.$util.msg('请上传身份证正面')
						}
						if (!this.description) {
							return this.$util.msg('请输入店铺简介')
						}
						if (!this.shopServiceCategorys) {
							return this.$util.msg('请选择技工服务类型')
						}
				
						console.log(this.otherCredentialsPic)
						if (this.imgList.length == 0) {
							return this.$util.msg('请上传门头照片和店内照片')
						}
						if (this.imgList3.length == 0) {
							return this.$util.msg('请上传工程案例')
						}
				
						if (this.imgList2.length == 0) {
							return this.$util.msg('请上传其他资质正面')
						}
						const data = {
							shopName,
							address: this.address,
							longitude,
							latitude,
							mobile: this.mobile,
							credentialsPic,
							logo,
							leaderName,
							leaderId,
							leaderIdPicBack,
							leaderIdPicFront,
							shopServiceCategorys,
							shopType,
							otherCredentialsPic: imgList2.toString(),
							otherShopPic: imgList.toString(),
							shopProject: this.imgList3.toString(),
							userId: uni.getStorageSync('userId') || appConfig.userId,
							description,
							id:this.id
				
						}
				
						this.$jsonPost(this.$api.updateShop, data).then(rs => {
							const [err, res] = rs
							if (res) {
								if (res.code == 200) {
									uni.showToast({
										title: '更新成功',
										duration: 1500,
										icon: 'none'
				
									})
									setTimeout(function() {
										uni.navigateBack()
									}, 2000)
				
								} else {
									this.$util.msg(res.data.message)
								}
				
							}
						})
				
				
					}
				})
			},

			submit() {
				uni.showModal({
					title: '提示',
					content: '你确定要认证为服务商吗',
					success: res => {
						console.log(res)
						const {
							shopName,
							address,
							logo,
							leaderName,
							leaderId,
							leaderIdPicBack,
							leaderIdPicFront,
							mobile,
							credentialsPic,
							shopType,
							shopServiceCategorys,
							otherCredentialsPic,
							otherShopPic,
							imgList,
							imgList2,
							longitude,
							latitude,
							description
						} = this
						if (!this.shopName) {
							return this.$util.msg('请输入店铺名字')
						}
						if (!this.address) {
							return this.$util.msg('请输入店铺地址')
						}
						if (!this.mobile) {
							return this.$util.msg('请输入联系方式')
						}
						if (!this.credentialsPic) {
							return this.$util.msg('请上传营业执照')
						}
						if (!this.logo) {
							return this.$util.msg('请上传店铺logo')
						}
						if (!this.leaderName) {
							return this.$util.msg('请输入法人姓名')
						}
						
						if (!checkIDCard(this.leaderId)) {
							return this.$util.msg('法人身份证格式有误')
						}

                        if (!this.leaderIdPicBack) {
							return this.$util.msg('请上传身份证反面')
						}
						if (!this.leaderIdPicFront) {
							return this.$util.msg('请上传身份证正面')
						}
						if (!this.description) {
							return this.$util.msg('请输入店铺简介')
						}
						if (!this.shopServiceCategorys) {
							return this.$util.msg('请选择技工服务类型')
						}

						console.log(this.otherCredentialsPic)
						if (this.imgList.length == 0) {
							return this.$util.msg('请上传门头照片和店内照片')
						}
						if (this.imgList3.length == 0) {
							return this.$util.msg('请上传工程案例')
						}

						if (this.imgList2.length == 0) {
							return this.$util.msg('请上传其他资质正面')
						}
						const data = {
							shopName,
							address: this.detailedAddress,
							longitude,
							latitude,
							mobile: this.mobile,
							credentialsPic,
							logo,
							leaderName,
							leaderId,
							leaderIdPicBack,
							leaderIdPicFront,
							shopServiceCategorys,
							shopType,
							otherCredentialsPic: imgList2.toString(),
							otherShopPic: imgList.toString(),
							shopProject: this.imgList3.toString(),
							userId: uni.getStorageSync('userId') || appConfig.userId,
							description

						}

						this.$jsonPost(this.$api.applyShop, data).then(rs => {
							const [err, res] = rs
							if (res) {
								if (res.code == 200) {
									uni.showToast({
										title: '请注意消息提醒，1~3个工作日有认证反馈',
										duration: 3000,
										icon: 'none'

									})
									setTimeout(function() {
										uni.navigateBack()
									}, 4000)

								} else {
									this.$util.msg(res.data.message)
								}

							}
						})


					}
				})
			},
			async getDetail() {
				const data = {
					id: this.userInfo.shopIdApply
				}
				const [err, rs] = await this.$get(this.$api.shop_detail, data)
				if (rs) {
					this.userInfoMsg = rs.data
					const res = rs.data
					this.shopName = res.shopName
					this.address = res.address
					this.mobile = res.mobile
					this.longitude = res.longitude
					this.latitude = res.latitude
					this.credentialsPic = res.credentialsPic
					this.logo = res.logo
					this.leaderName = res.leaderName
					this.leaderId = res.leaderId
					this.leaderIdPicBack = res.leaderIdPicBack
					this.leaderIdPicFront = res.leaderIdPicFront
                    this.id = res.id
					this.checkeds = res.shopServiceSupportList
					const array = []
					for (let i in this.checkeds) {
						console.log(this.checkeds[i])
						array.push(this.checkeds[i].id)
						this.checkeds[i]['name'] = this.checkeds[i].shopServiceName


					}
				
					// this.shopServiceSupportList = array.toString()
					this.shopServiceCategorys = array.toString()
					this.imgList = res.otherShopPic.split(',')
					this.imgList2 = res.otherCredentialsPic.split(',')
					this.imgList3 = res.shopProject.split(',')
					this.description = res.description

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.unactive {
		pointer-events: none;
		margin-bottom: 60rpx;
	}

	.IDcard {

		.i-right,
		.i-left {
			width: 334rpx;
			height: 216rpx;
			background-color: #F4F4F4;

			image {
				width: 156rpx;
				height: 156rpx;
			}
		}

	}

	.m-card {

		.i-right,
		.i-left {
			width: 334rpx;
			height: 216rpx;
			background-color: #F4F4F4;

			image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}

	.t-btn {
		padding: 18rpx 28rpx;
	}

	.btn {
		margin: 60rpx 20rpx 20rpx;
	}

	.other-img {
		image {
			width: 226rpx;
			height: 226rpx;
		}

		.solids {
			width: 226rpx;
			height: 226rpx;
			background: #F4F4F4;
		}

		.solids::after {
			border: 0;
		}
	}
</style>
